<template>
  <page-header-wrapper>
    <a-card :bordered="false" v-loading="loading">
      <template v-if="isJoin == 1">
        <a-result status="success" title="您当前已经加入联盟！">
        </a-result>
      </template>
      <template v-else-if="isJoin == 2">
        <a-result title="审核中，请耐心等待！">
        </a-result>
      </template>
      <template v-else>
        <a-button type="primary" @click="onClickJoin">
          加入联盟
        </a-button>
      </template>
    </a-card>
    <a-modal
      title="联盟入驻协议"
      :visible="visible"
      :confirm-loading="confirmLoading"
      okText="同意"
      cancelText="拒绝"
      width="650px"
      @ok="handleOk"
      @cancel="handleCancel"
    >
      <div v-html="content" v-loading="modalLoading" style="min-height: 200px"></div>
    </a-modal>
  </page-header-wrapper>
</template>

<script>
import { getStoreInfo, joinAlliance } from '@/api/store'
import { getSaasProtocol } from '@/api/saas/setting'

export default {
  name: 'JoinAlliance',
  data () {
    return {
      loading: false,
      modalLoading: false,
      isJoin: 0,
      visible: false,
      content: '',
      confirmLoading: false
    }
  },
  created () {
    this.getData()
  },
  methods: {
    getData: function () {
      this.loading = true
      getStoreInfo({}).then(res => {
        if (res.code == 0) {
          this.isJoin = res.data.is_alliance
        }
      }).catch(error => {
        console.log(error)
      }).then(() => {
        this.loading = false
      })
    },
    onClickJoin: function () {
      this.visible = true
      this.modalLoading = true
      getSaasProtocol({}).then(res => {
        if (res.code == 0) {
          this.content = res.data
        }
      }).catch(error => {
        console.log(error)
      }).then(() => {
        this.modalLoading = false
      })
    },
    handleCancel: function () {
      this.visible = false
    },
    handleOk: function () {
      this.confirmLoading = true
      joinAlliance({ status: 2 }).then(res => {
        if (res.code == 0) {
          this.visible = false
          this.getData()
          this.$message.success(res.msg)
        } else {
          this.$message.warning(res.msg)
        }
      }).catch(error => {
        console.log(error)
      }).then(() => {
        this.confirmLoading = false
      })
    }
  }
}
</script>
<style scoped>

</style>
